<template>
  <!-- CardAccessRecord 访问记录 -->
  <PageContainer>
    <view class="container">
      <Header title="访问记录" />
      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :scroll-top-bottom="260"
      >
        <template v-for="v in dataList" :key="v.id">
          <view class="item" @click="toCard(v.leaderId)">
            <view class="item-avatar">
              <TImage
                :src="v.leadingAvatar"
                width="96rpx"
                height="120rpx"
                border-radius="10rpx"
                error-img-type="person"
              />
            </view>
            <view class="item-info">
              <view class="item-info__top">
                <view class="top-item" style="margin-right: 60rpx">
                  <text class="leader-name text-overflow-1">{{ v.leadingName }}</text>
                  <text class="level-name text-overflow-1">{{ v.levelName }}</text>
                  <image v-if="v.leaderId" class="card-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/card/icon-12.png" />
                </view>
                <view class="top-item">
                  <text class="company-name text-overflow-1">{{ v.companyName }}</text>
                  <text class="position-name text-overflow-1">{{ v.socialPosition }}</text>
                </view>
              </view>
              <view class="item-info__bot">
                <text class="label">最后查看时间</text>
                <text class="value">{{ v.lastTime }}</text>
              </view>
            </view>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  CardAccessRecord  访问记录 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { provide, reactive, ref } from 'vue';
  import { type BehaviorBrowseSetResult, type BehaviorLikeStatusData } from '@/api/indexTypes';
  import { LikeTypeEnum } from '@/enums/publicModuleEnum';
  import { behaviorBrowseSet } from '@/api';
  import { navigateTo, onLoad } from '@/router';

  const parame = reactive<BehaviorLikeStatusData>({
    sourceId: 0,
    type: LikeTypeEnum.PERSONCARD,
  });
  const dataList = ref<BehaviorBrowseSetResult[]>([]);
  const [register, { refresh }] = useConList();

  onLoad<'CardAccessRecord'>((op) => {
    parame.sourceId = op.sourceId;
    parame.type = op.type;
    refresh();
  });

  function toCard(leaderId: number) {
    leaderId && navigateTo({ name: 'personCard', options: { id: leaderId } });
  }

  provide('api', behaviorBrowseSet);
  provide('tabIsShow', null);
</script>

<style lang="scss" scoped>
  .item {
    background-color: #fff;
    padding: 30rpx;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    &-avatar {
      width: 96rpx;
      flex-shrink: 0;
      margin-right: 30rpx;
    }
    &-info {
      flex: 1;
      color: #333;
      height: 120rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &__top {
        .top-item {
          display: flex;
          font-size: 28rpx;
          align-items: center;
          position: relative;
          .leader-name {
            font-size: 32rpx;
            font-weight: bolder;
          }
          .level-name {
            font-size: 24rpx;
            background-color: #ece2c7;
            padding: 0 14rpx;
            margin-left: 10rpx;
            border-radius: 110rpx;
          }
          .card-icon {
            position: absolute;
            right: -60rpx;
            top: 13rpx;
            width: 40rpx;
            height: 26rpx;
          }
          .company-name {
            margin-right: 10rpx;
          }
        }
      }
      &__bot {
        font-size: 24rpx;
        color: #aaabab;
        .label {
          margin-right: 20rpx;
        }
      }
    }
  }
</style>
